<template>
  <w-pop ref="pop" :direction="'ttb'">
    <div class="item" @click="handleSetLanguage('zh')">
      <button>{{ $t("login.zh") }}</button>
    </div>
    <div class="item" @click="handleSetLanguage('en')">
      <button>{{ $t("login.eh") }}</button>
    </div>
  </w-pop>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  nextTick,
  onMounted,
  toRaw,
  toRefs,
  watch,
} from "vue";
import i18 from "../i18n";
import store from "../store";
export default defineComponent({
  setup() {
    const pop = ref();
    const open = () => {
      pop.value.open();
    };

    // 进行语言切换
    const handleSetLanguage = (lang) => {
      i18.global.locale.value = lang;
      store.commit("setLanguage", lang);
      pop.value.close();
    };
    return {
      pop,
      open,
      handleSetLanguage,
    };
  },
});
</script>
<style scoped lang="scss">
.item {
  color: #333333;
  margin: 0 17px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #0000001f;
  font-size: 14px;
  color: #000;

  button {
    width: 100%;
    height: 100%;
    text-align: left;
    border: none;
    background-color: #fff;
    color: #333;
    font-size: 14px;

  }
}
</style>
